<template>
  <!-- ---采购管理首页   -->
  <div class="Purchase_home">
    <div class="Purchase_theme">
      <span class="Purchase_text">代办提醒</span>
      <p class="Purchase_Division"></p>
      <div>
        <div class="Custom">
          <i class="el-icon-warning Custom-ph"></i>
          <span class="Custom-Ds">待收货</span>
          <span class="Custom-Ca">长安汽车</span>
          <span class="Custom-Oa">1条</span>
          <el-button class="Custom-Btn" type="primary">查看详情</el-button>
        </div>
        <div class="Custom">
          <i class="el-icon-warning Custom-ph"></i>
          <span class="Custom-Ds">待结算</span>
          <span class="Custom-Ca">长安汽车</span>
          <span class="Custom-Oa">1条</span>
          <el-button class="Custom-Btn" type="primary">查看详情</el-button>
        </div>
        <div class="Custom">
          <i class="el-icon-warning Custom-ph"></i>
          <span class="Custom-Ds">待定价</span>
          <span class="Custom-Ca">长安汽车</span>
          <span class="Custom-Oa">3条</span>
          <el-button class="Custom-Btn" type="primary">查看详情</el-button>
        </div>
      </div>
    </div>
    <!-- -------第二模块儿------------- -->
    <div class="Purchase_theme1">
      <span class="Purchase_text">本月采购计划</span>
      <p class="Purchase_Division"></p>
      <el-table
        :data="tableDataBs"
        style="width: 100%;background-color:#fff"
        :max-height="250"
        stripe
      >
        <el-table-column prop="Name" label="物料名称" align="center"></el-table-column>
        <el-table-column prop="type" label="物料类型" align="center"></el-table-column>
        <el-table-column prop="pmonth" label="月份" align="center"></el-table-column>
        <el-table-column prop="Sale" label="销售计划" align="center"></el-table-column>
        <el-table-column prop="createon" label="需求时间/数量" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- -------第三模块儿------------- -->
    <div class="Purchase_theme2">
      <span class="Purchase_text">安全库存</span>
      <p class="Purchase_Division"></p>
      <el-table :data="tableDataBa" :max-height="330" stripe>
        <el-table-column prop="picture" label="原料图片" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.drawingspath" class="avatar">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="materialnametype" label="原料型号" align="center"></el-table-column>
        <el-table-column prop="materialname" label="原料名称" align="center"></el-table-column>
        <el-table-column prop="warehousetypeno" label="原料库存" align="center"></el-table-column>
        <el-table-column prop="mininventory" label="库存下限" align="center"></el-table-column>
        <el-table-column prop="maxinventory" label="库存上限" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- -------第四模块儿------------- -->
    <div class="Purchase_theme3">
      <span class="Purchase_text">采购结算</span>
      <p class="Purchase_Division"></p>
      <el-table :data="tableDataBy" :max-height="330" stripe>
        <el-table-column prop="picture" label="采购项目" align="center"></el-table-column>
        <el-table-column prop="materialname" label="企业名称" align="center"></el-table-column>
        <el-table-column prop="Money" label="采购金额(元)" align="center"></el-table-column>
        <el-table-column prop="Money" label="已结金额(元)" align="center"></el-table-column>
        <el-table-column prop="time" label="截至时间" align="center"></el-table-column>
        <el-table-column prop="State" label="状态" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imageUrl: "",
      imageUrlss: "",
      tableData: [],
      tableDataBs: [],
      tableDataBa: [],
      tableDataBy: []
    };
  },
  created() {
    this.getData();
    this.getDatel();
    this.getDataBy();
    this.getDataBs();
  },
  methods: {
    //代办提醒
    getData() {
      axios("/apis/PurchasingManagement.asmx/HP_Purchasing?index=1").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          console.log("11111");

          console.log(list);
        }
      );
    },
    //本月采购计划
    getDatel() {
      axios("/apis/PurchasingManagement.asmx/HP_Purchasing?index=2").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.tableDataBs = [];
          this.tableDataBs = list;
          //日期解析
          for (var i = 0; i < list.length; i++) {
            var ddd = new Date(parseInt(list[i].createon.substr(6, 13)));
            var y = ddd.getFullYear();
            var m = ddd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var minute = ddd.getMinutes();
            minute = minute < 10 ? "0" + minute : minute;
            var second = ddd.getSeconds();
            second = second < 10 ? "0" + second : second;
            list[i].createon = y + "-" + m + "-" + second;
          }
        }
      );
    },
    //安全库存
    getDataBy() {
      axios("/apis/PurchasingManagement.asmx/HP_Purchasing?index=3").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.tableDataBa = [];
          this.tableDataBa = list;
        }
      );
    },

    //采购结算
    getDataBs() {
      axios("/apis/PurchasingManagement.asmx/HP_Purchasing?index=4").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.tableDataBy = [];
          this.tableDataBy = list;
        }
      );
    },

    //图片上传
    handleAvatarSuccess(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrlss = datas.UpFileReturn.url;
      this.imageUrl = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl);
      console.log(this.imageUrls);
      console.log(this.imageUrlss);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.Purchase_home {
  width: 100%;
  background-color: rgb(242, 243, 251);
  z-index: 1;
}
//布局块儿
.Purchase_theme {
  margin-left: 8px;
  height: 350px;
  width: 40.5%;
  border-radius: 10px;
  background-color: $white;
  display: inline-block;
}
.Purchase_text {
  line-height: 40px;
  margin-left: 10px;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}
//自定义

.Custom {
  margin-top: 50px;
}
.Custom-ph {
  font-size: 28px;
  color: rgb(117, 183, 236);
  margin-left: 25px;
}
.Custom-Ds {
  margin-left: 10px;
  color: rgb(117, 183, 236);
}
.Custom-Ca {
  margin-left: 20%;
}
.Custom-Oa {
  margin-left: 20%;
}
.Custom-Btn {
  float: right;
  margin-right: 4%;
}
//第二模块儿
.Purchase_theme1 {
  margin-top: -350px;
  margin-left: 42%;
  width: 57.3%;
  height: 350px;
  border-radius: 10px;
  background-color: $white;
}
.Purchase_theme2 {
  margin-top: 10px;
  margin-left: 8px;
  width: 48.6%;
  height: 450px;
  border-radius: 10px;
  background-color: $white;
}
.Purchase_theme3 {
  margin-top: -450px;
  margin-left: 50%;
  width: 49.3%;
  height: 450px;
  border-radius: 10px;
  background-color: $white;
}
.avatar {
  width: 100px;
  height: 40px;
}
.avatar-uploader {
  width: 100px;
  height: 40px;
}
</style>